<template>
    <div class="table">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-logo-menu"></i>产品</el-breadcrumb-item>
                <el-breadcrumb-item>产品管理</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="crumbs clearfix">
            <div class="left filter-item">
                <!-- 学校： -->
                <el-select clearable v-model="listQuery.param.schoolId" placeholder="请选择学校">
                    <el-option
                    v-for="item in schoolOptions"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
                    </el-option>
                </el-select>
            </div>
            <div class="left filter-item">
                <el-select clearable v-model="listQuery.param.shopType"  style="width: 140px;" placeholder="店铺类型">
                    <el-option
                    v-for="item in shopTypeOption"
                    :key="item.id"
                    :disabled="item.disabled"
                    :label="item.name"
                    :value="item.id">
                    </el-option>
                </el-select>
            </div>
            <div class="left filter-item">
                <el-select v-model="listQuery.param.updown" placeholder="商品状态" clearable >
                    <el-option v-for="item in productStatusOptions" :key="item.id" :label="item.name" :value="item.id">
                    </el-option>
                </el-select>
            </div>
            <!-- <div class="left filter-item">
                <el-select clearable v-model="listQuery.param.shopType"  style="width: 140px;" placeholder="请选择商品类别">
                    <el-option
                    v-for="item in shopTypeOption"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
                    </el-option>
                </el-select>
            </div> -->
            <div class="left filter-item">
                <el-input @keyup.enter.native="handleFilter" style="width: 200px;" class="filter-item" placeholder="店铺名" v-model="listQuery.param.shopName">
                </el-input>
            </div>
            <div class="left filter-item">
                <el-input @keyup.enter.native="handleFilter" style="width: 200px;" class="filter-item" placeholder="请输入商品类别" v-model="listQuery.param.kindName">
                </el-input>
            </div>
            <div class="left filter-item">
                <el-input @keyup.enter.native="handleFilter" style="width: 200px;" class="filter-item" placeholder="商品名" v-model="listQuery.param.name">
                </el-input>
            </div>
            <el-button class="left filter-item" style="margin-left: 30px;" type="primary" icon="search" @click="handleFilter">搜索</el-button>
        </div>
        <div style="float: right">
            <el-button @click="add" type="primary"><i class="el-logo-plus"></i> 添加</el-button>
            <el-button @click="del()" type="primary" logo="delete">删除</el-button>
        </div>
        <el-table :data="tableData" border style="width: 100%" @selection-change="handleSelectionChange" >
            <el-table-column type="selection" width="auto"  min-width="40spx">
            </el-table-column>
            <el-table-column prop="name" label="名称" min-width="160spx">
            </el-table-column>
            <el-table-column label="logo" min-width="156spx">
                <template scope="scope">
                    <img :src="scope.row.logo" width="100" height="100">
                </template>
            </el-table-column>
            <!-- <el-table-column prop="shopName" label="所属店铺名" min-width="160spx">
            </el-table-column>
            <el-table-column prop="kindName" label="分类" min-width="160spx">
            </el-table-column> -->
            <el-table-column prop="price" label="原价" min-width="100spx">
            </el-table-column>
            <el-table-column prop="discountPrice" label="折后价" min-width="100spx">
            </el-table-column>
            <el-table-column prop="sold" label="已售" min-width="100spx">
            </el-table-column>
            <el-table-column prop="stock" label="库存" min-width="100spx">
            </el-table-column>
            <!-- <el-table-column label="状态" width="80px" >
                 <template scope="scope">
                     <div v-if="scope.row.status == '0'" >上架</div>
                     <div v-if="scope.row.status == '-1'">下架</div>
                 </template>
             </el-table-column> -->
            <el-table-column prop="createDate" label="创建时间" min-width="160spx" :formatter="formatterCreateDate">
            </el-table-column>
            <el-table-column type="expand" label="操作" min-width="199spx">
                <template scope="scope">
                    <div style="float:right;width:500px">
                        <el-button size="small"
                                @click="productDetail(scope.$index, scope.row)">详情</el-button>
                        <el-button size="small"
                                @click="productProperty(scope.$index, scope.row)">产品属性</el-button>
                        <el-button size="small"
                                @click="productPropertyLabel(scope.$index, scope.row)">产品规格</el-button>
                        <el-button size="small"
                                @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                        <el-button v-if="scope.row.updown==0" size="small" type="warning"
                                @click="handleUpDown(scope.$index, scope.row,1)">下架</el-button>
                        <el-button v-if="scope.row.updown==1" size="small" type="success"
                                @click="handleUpDown(scope.$index, scope.row,0)">上架</el-button>
                        <el-button size="small" type="danger"
                                @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                    </div>
                </template>
            </el-table-column>
        </el-table>
        <div class="pagination">
            <el-pagination
               @size-change="handleSizeChange"
               @current-change="handleCurrentChange"
               :current-page="listQuery.pageNumber"
               :page-sizes="[10, 20, 50]"
               :page-size="listQuery.pageSize"
               layout="total, sizes, prev, pager, next, jumper"
               :total="total">
            </el-pagination>
        </div>
        
        <!-- 添加/编辑商品 -->
        <el-dialog :title="dailogTitle" :visible.sync="editDialogFormVisible">
            <div style="text-align:center;">
                <div style="text-align:left;width:90%;margin:0 auto;">
                    <el-form :model="entityForm" :rules="rules" ref="entityForm" label-width="100px" class="demo-ruleForm" style="width:90%;">
                         <el-form-item prop="id"  style="display:none;">
                           <el-input v-model="entityForm.id" placeholder="编号"  ></el-input>
                        </el-form-item>
                        <el-form-item prop="name"  label="名称">
                           <el-input v-model="entityForm.name" placeholder="名称" ></el-input>
                        </el-form-item>
                        <el-form-item v-if="!entityForm.id"  label="一级分类">
                           <el-select v-model="entityForm.firstKind" placeholder="请选择一级分类" clearable @change="selectFirstKind(entityForm.firstKind)">
                                <el-option v-for="item in firstKindOptions" :key="item.id" :label="item.name" :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item v-if="!entityForm.id"  label="二级分类">
                           <el-select v-model="entityForm.secondKind" placeholder="请选择二级分类" clearable >
                                <el-option v-for="item in secondKindOptions" :key="item.id" :label="item.name" :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item v-if="!entityForm.id"  label="所属学校">
                           <el-select v-model="entityForm.schoolId" placeholder="请选择所属学校" clearable @change="selectSchool(entityForm.schoolId)">
                                <el-option v-for="item in schoolOptions" :key="item.id" :label="item.name" :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item v-if="entityForm.id"  label="所属学校">
                           <el-select disabled v-model="entityForm.schoolId" placeholder="请选择所属学校" clearable @change="selectSchool(entityForm.schoolId)">
                                <el-option v-for="item in schoolOptions" :key="item.id" :label="item.name" :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item v-if="!entityForm.id" label="所属店铺">
                           <el-select v-model="entityForm.shopId" placeholder="请选择所属店铺" clearable >
                                <el-option v-for="item in shopSelectOptions" :key="item.id" :label="item.shopName" :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item v-if="entityForm.id" label="所属店铺">
                            <el-input disabled placeholder="店铺名" v-model="entityForm.shopName">
                            </el-input>
                        </el-form-item>
                        <el-form-item label="原价">
                           <el-input-number v-model="entityForm.price" :min="0" :max="21000000000" :step="0.01"></el-input-number>
                        </el-form-item>
                        <el-form-item label="折后价">
                           <el-input-number v-model="entityForm.discountPrice" :min="0" :max="Number(entityForm.price)" :step="0.01"></el-input-number>
                        </el-form-item>
                        <!-- <el-form-item label="库存">
                           <el-input-number v-model="entityForm.stock" :min="0" :max="2100000000" :step="1"></el-input-number>
                        </el-form-item> -->
                        <el-form-item label="产品logo">
                            <el-upload
                              class="avatar-uploader"
                              action="http://www.chenyekeji.com/21market/image/upload2"
                              :show-file-list="false"
                              :on-success="handleAvatarSuccess"
                              :before-upload="beforeAvatarUpload">
                              <img v-if="entityForm.logo" :src="entityForm.logo" class="avatar">
                              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                            </el-upload>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
            <div style="clear:both;"></div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="editDialogFormVisible=false">取消</el-button>
                <el-button  type="primary" @click="comfirmAdd()">保存</el-button>
            </div>
        </el-dialog>
        
        <!-- 商品详情 -->
        <el-dialog size="large" title="产品详情" :visible.sync="detailDialogFormVisible" style="width:100%;">
            <div style="text-align:center;">
                <div style="text-align:left;width:90%;margin:0 auto;">
                    <el-form :model="entityForm2" :rules="rules2" ref="entityForm2" label-width="0%" class="demo-ruleForm" style="width:90%;">
                        <el-form-item prop="id"  style="display:none;">
                           <el-input v-model="entityForm2.id" placeholder="编号"  ></el-input>
                        </el-form-item>
                        <div>
                            <span>文字描述</span>
                        </div>
                        <el-form-item prop="description" >
                           <el-input type="textarea" v-model="entityForm2.description" style="width:90%;" placeholder="为产品做个简单描述吧~" autosize ></el-input>
                        </el-form-item>
                        <div>
                            <span>产品详情</span>
                            <el-button @click="showDetailImgs()">预览</el-button>
                        </div>
                        <el-form-item class="editor">
                            <el-upload 
                                action="http://www.chenyekeji.com/21market/image/upload2"
                                list-type="picture-card"
                                ref="upload1"
                                :file-list="detailImgs"
                                :on-preview="handlePictureCardPreview"
                                :on-success="handleSuccess"
                                :on-remove="handleRemove">
                                <i class="el-icon-plus"></i>
                            </el-upload>
                        </el-form-item>
                        <div>
                            <span>产品轮播图</span>
                        </div>
                        <el-form-item  class="editor">
                            <el-upload
                                action="http://www.chenyekeji.com/21market/image/upload2"
                                list-type="picture-card"
                                ref="upload2"
                                :file-list="imgs"
                                :on-preview="handlePictureCardPreview2"
                                :on-success="handleSuccess2"
                                :on-remove="handleRemove2">
                                <i class="el-icon-plus"></i>
                            </el-upload>
                      </el-form-item>
                    </el-form>
                </div>
            </div>
            <div style="clear:both;"></div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="detailDialogFormVisible=false">取消</el-button>
                <el-button  type="primary" @click="saveUpdateDetail()">保存</el-button>
            </div>
        </el-dialog>
        
        <el-dialog v-model="dialogVisible" size="tiny">
            <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>

        <!-- 商品详情预览 -->
        <el-dialog title="产品详情预览" v-model="showDialog" size="large" style="width:80%;margin:0 auto;max-width:370px;top:0%;">
            <div style="width:256px;max-height:576px;;overflow-y:auto;margin:0 auto;">
                <div style="width:100%;margin:0 auto;" 
                v-if="showImgArr && showImgArr.length > 0"
                v-for="item in showImgArr"
                >
                    <img :src="item" style="width:256px;margin:0 auto;display:block;" />
                </div>
            </div>
            <div style="clear:both"></div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="showDialog=false">关闭</el-button>
            </div>
        </el-dialog>

    </div>
</template>

<script>
    import $ from 'jquery';
    import Vue from 'vue';

    export default {
        data() {
            return {
                tableData: [],
                total: 1000,
                firstKindOptions: [],
                secondKindOptions: [],
                schoolOptions: [],
                shopSelectOptions: [],
                shopTypeOption: [],
                productStatusOptions: [{id: '0',name: '正常'}, {id: '-1',name: '下架'}],
                listQuery: {
                    pageNumber: 1,
                    pageSize: 10,
                    param: {
                        schoolId: '',
                        shopType: '',
                        shopName: '',
                        name: '',
                        updown: '',
                        kindName: ''
                    },
                },
                // propretis for dailog
                kindQuery:{
                    pageNumber: 1,
                    pageSize: 100,
                    param:{
                        pid: null
                    }
                },
                imageUrl: '',
                dailogTitle: '',
                editDialogFormVisible: false,
                addDialogFormVisible: false,
                // record for input
                entityForm: {
                    id: '',
                    name: '',
                    firstKind: '',
                    secondKind: '',
                    schoolId: '',
                    shopId: '',
                    price: 0,
                    discountPrice: 0,
                    stock:0,
                    logo:'',
                },
                rules: {
                    name: [
                        {required: true, message: '请输入产品名', trigger: 'blur'}
                    ],
                    // price: [
                    //     {required: true, message: '请输入原价', trigger: 'blur'}
                    // ],
                    // discountPrice: [
                    //     {required: true, message: '请输入折后价', trigger: 'blur'}
                    // ],
                    // stock: [
                    //     {required: true, message: '请输入库存', trigger: 'blur'}
                    // ],
                    logo: [
                        {required: true, message: '请上传图片', trigger: 'blur'}
                    ]
                },
                ruleForm: {
                    name: '',
                    code: ''
                },
                multipleSelection: [],
                // -----------------product detail------------------//
                detailDialogFormVisible:false,
                entityForm2: {
                    id: '',
                    description: '',
                    detailImgs: '',
                    imgs: '',
                },
                rules2: {
                    description: [
                        {required: true, message: '请输入产品描述', trigger: 'blur'}
                    ],
                },
                detailImgs:[
                    // {name:"test",url:"http://img.taopic.com/uploads/allimg/140313/235026-1403130Z43831.jpg"},
                    // {name:"test",url:"http://pic71.nipic.com/file/20150707/11135325_162943209000_2.png"},
                ],
                imgs:[
                    // "http://img.taopic.com/uploads/allimg/140313/235026-1403130Z43831.jpg",
                    // "http://pic71.nipic.com/file/20150707/11135325_162943209000_2.png",
                ],
                dialogImageUrl: '',
                dialogVisible: false,
                showImgArr:[],
                showDialog: false,
                // -----------------product detail------------------//      
            }
        },
        created(){
            this.getschoollist();
            this.getshopTypelist();
            this.getData();
            this.showDialog=true;
        },
        mounted(){
            this.editDialogFormVisible=false;
            this.detailDialogFormVisible=false;
            this.showDialog=false;
            $(".el-dialog--large").css(
                "top","0%"
            );
        },
        methods: {
            handleCurrentChange(val){
                this.listQuery.pageNumber = val
                this.getData();
            },
            handleSizeChange(val){
                this.listQuery.pageSize = val
                this.getData();
            },
            handleFilter(){
                this.listQuery.pageNumber = 1
                this.getData()
            },
            getschoollist(){
                let self = this;
                let _data = {
                    pageNumber: 1,
                    pageSize: 10000,
                }
                self.myajax("/school/list",_data,function(res){
                    console.log(res)
                    if(res.code==1000){
                        self.schoolOptions=res.data.list;
                    }
                });
            },
            getshopTypelist(schoolName){
                let self = this;
                let _data = {
                    pageNumber: 1,
                    pageSize: 100,
                    param: {
                    },
                }
                self.myajax("/shopType/list",_data,function(res){
                    console.log(res);
                    let arr = res.data.list
                    for(let i in arr){
                        if(arr[i].id=='735279aea3ef4c7fb780b120f9b160a1'){
                            arr[i].disabled = true
                        }
                    }
                    self.shopTypeOption = arr
                });
            },
            getData(){
                // data.param.orderField='create_date';
                // data.param.orderRule='ASC';
                this.myajax("/product/list",this.listQuery,res=>{
                    console.log(res)
                    this.tableData=res.data.list;
                    this.total=res.data.total;
                });
            },
            add() {                 //添加商品打开dialog
                let self = this;
                self.dailogTitle = '添加产品';
                // self.entityForm = {};
                self.entityForm.id = "";
                self.entityForm.name = "";
                self.entityForm.price = "";
                self.entityForm.discountPrice = "";
                self.entityForm.stock = 0;
                self.kindQuery.param.pid = ""
                self.myajax("/kind/list",self.kindQuery,function(res){
                    self.firstKindOptions = res.data.list
                });
                self.editDialogFormVisible = true;
            },
            handleEdit(index, row) {       //编辑商品
                let self = this;
                self.dailogTitle = '更改信息';
                self.entityForm.id = row.id;
                self.entityForm.name = row.name;
                self.entityForm.price = row.price;
                self.entityForm.schoolId = row.schoolId
                // self.entityForm.shopName = row.shopName
                self.entityForm.discountPrice = row.discountPrice;
                self.entityForm.stock = row.stock;
                self.entityForm.logo = row.logo;
                self.editDialogFormVisible = true;
            },
            comfirmAdd() {            //确认添加商品/修改商品
                console.log(this.entityForm)
                let self = this
                self.$refs['entityForm'].validate((valid) => {
                    if (valid) {
                        self.$confirm('确定要保存吗？', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning'
                        }).then(() => {
                            self.saveUpdate();
                        });
                    }
                }); 
            },
            saveUpdate(){
                let self = this;
                let firstKindName = this.getNameByIdFromArr(this.entityForm.firstKind,this.firstKindOptions)
                let secondKindName = this.getNameByIdFromArr(this.entityForm.secondKind,this.secondKindOptions)
                let data = {
                    id: this.entityForm.id,
                    name: this.entityForm.name,
                    kindId: this.entityForm.secondKind,
                    kindName: firstKindName+'/'+secondKindName,
                    schoolId: this.entityForm.schoolId,
                    shopId: this.entityForm.shopId,
                    price: this.entityForm.price,
                    discountPrice: this.entityForm.discountPrice,
                    stock: this.entityForm.stock,
                    logo: this.entityForm.logo,
                    sold: 0
                }
                let url = '/product/add';
                if(this.entityForm.id){
                    url = '/product/update';
                }
                this.myajax(url,data,res=>{
                    console.log(res)
                    if(res.code==1000){
                        this.$notify({title: '提示',message: "操作成功",type: 'success'});
                        this.editDialogFormVisible = false;
                        this.getData()
                    }
                });
            },
            handleUpDown(index,row,updown){
                let data = {
                    id: row.id,
                    updown: updown
                }
                this.myajax("/product/setAble",data,res=>{
                    if(res.code==1000){
                        this.$notify({title: '提示',message: '下架成功',type: 'success'});
                        this.getData()
                    }
                });
            },
            handleDelete(index, row) {
                this.del(row.id);
            },
            del(id) {             
                var self=this;
                var ids = new Array();
                if (id) {
                    ids.push(id);
                }else{
                    if(self.multipleSelection.length==0){
                        self.$notify({title: '提示',message: '请先选择',type: 'warning'});
                        return;
                    }
                    for(var k in this.multipleSelection){
                        ids.push(this.multipleSelection[k].id);
                    }
                }

                self.$confirm('确定要删除这'+ ids.length +'项吗？', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    var data={ids:ids}; 
                    self.myajax("/product/delete",data,function(data){
                        var code=data.code;
                        if(code==1000){
                            self.$notify({title: '提示',message: "成功",type: 'success'});
                        }else{
                            self.$notify({title: '提示',message:data.msg,type: 'error'});
                        }
                        self.getData();
                    });
                });
            },
            selectFirstKind(pid){
                this.kindQuery['param'].pid = pid
                this.myajax("/kind/list",this.kindQuery,res=>{
                    this.secondKindOptions = res.data.list
                });
            },
            selectSchool(shoolId){
                let data = {
                    pageNumber: 1,
                    pageSize: 10000,
                    param: {
                        schoolId: shoolId,
                    },
                }
                this.myajax("/shop/list",data,res=>{
                    console.log(res)
                    this.shopSelectOptions = res.data.list
                });
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            formatterCreateDate(row,column){
                var date = row.createDate;  
                if (date == undefined) {  
                    return "";  
                } 
                return new Date(date).format("yyyy-MM-dd hh:mm");
            },
            
            // -----------------product detail------------------//
            productDetail($index,row){     //打开商品detail弹框
                if(row.id) {
                    let self = this;
                    self.entityForm2.id = row.id;
                    self.myajax("/product_detail/get/"+row.id,{},function(data){   //根据id查商品详情信息
                        if (data.code == 1000) {
                            console.log(data)  
                            // self.$refs['upload1'].clearFiles();   
                            // self.$refs['upload2'].clearFiles();  

                            self.entityForm2.description = data.data.description;
                            self.entityForm2.detailImgs = data.data.detailImgs;
                            self.entityForm2.imgs = data.data.imgs;
                            
                            self.detailImgs.length = 0;
                            self.imgs.length = 0;
                            
                            self.getUrlArr(data.data.detailImgs,self.detailImgs);
                            self.getUrlArr(data.data.imgs,self.imgs);

                            self.detailDialogFormVisible = true;
                        }else{
                            self.$notify({title: '提示',message:data.message,type: 'error'});
                        }
                    });
                }else{
                   
                }
            },
            saveUpdateDetail(){            //保存更改详情
                let self = this;
                console.log(this.entityForm2)
                self.myajax("/product_detail/insertOrUpdate",this.entityForm2,function(data){
                    if (data && data.code == 1000) {
                        self.$notify({title: '提示',message:'保存成功',type: 'success'});
                        self.detailDialogFormVisible = false;
                    }else{
                        self.$notify({title: '提示',message:data.message,type: 'error'});
                    }
                })
            },
            getStringUrl(arr){  //根据数组拼接url，中间用 ',' 号隔开
                if (arr && arr.length > 0) {
                    var urls = "";
                    for(var i in arr){
                        var obj = arr[i];
                        if (obj) {
                            if(obj.response) {
                                urls += (Vue.prototype.$host + obj.response);
                            }else if (obj.url) {
                                urls += obj.url;
                            }else{
                                continue;
                            }
                        }
                        if (i != arr.length - 1) {
                            urls += ',';
                        }
                    }
                    return urls;
                }else{
                    return "";
                }
            },
            getUrlArr(urls,arr){    //根据拼接的url往图片墙数组中添加数据
                if (urls) {
                    var strArr = urls.split(',');
                    for(var i in strArr){
                        var obj = { 
                            name:new Date().getTime().toString(),
                            url:strArr[i] 
                        }
                        arr.push(obj);
                    }
                }
            },
            handleSuccess(response, file, fileList){
                console.log(file)
                let self = this;
                self.entityForm2.detailImgs = self.getStringUrl(fileList);
            },
            handleRemove(file, fileList) {
                let self = this;
                self.entityForm2.detailImgs = self.getStringUrl(fileList);
            },
            handlePictureCardPreview(file) {
                console.log("file");
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            },
            handleSuccess2(response, file, fileList){
                let self = this;
                self.entityForm2.imgs = self.getStringUrl(fileList);
            },
            handleRemove2(file, fileList) {
                let self = this;
                self.entityForm2.imgs = self.getStringUrl(fileList);
            },
            handlePictureCardPreview2(file) {
                console.log("file");
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            },
            showDetailImgs(){
                let self = this;
                var imgArr = self.entityForm2.detailImgs.split(',');

                self.showImgArr.length = 0;
                for(var i in imgArr){
                    self.showImgArr.push(imgArr[i]);
                }
                self.showDialog = true;
            },
            // -----------------product detail------------------//

            // -----------------product property and label------------------//
            productProperty($index,row){
                let self = this;
                if (row.id) {
                    localStorage.setItem("productId",row.id);
                    // self.$router.push('/property');
                    self.$router.push({ name: 'Property', params: { product: row }})
                }else{
                    self.$notify({title: '提示',message:"未知错误，请联系系统管理员",type: 'error'});
                }
            },
            productPropertyLabel($index,row){
                let self = this;
                if (row.id) {
                    localStorage.setItem("productId",row.id);
                    // self.$router.push('/propertyLabel');
                    self.$router.push({ name: 'PropertyLabel', params: { product: row }})
                }else{
                    self.$notify({title: '提示',message:"未知错误，请联系系统管理员",type: 'error'});
                }
            },
            // -----------------product property and label------------------//
            handleAvatarSuccess(res, file) {
                this.imageUrl = URL.createObjectURL(file.raw);
                this.entityForm.logo = Vue.prototype.$host + res
                console.log(this.imageUrl)
                console.log(res)
            },
            beforeAvatarUpload(file) {
                const isJPG = (file.type === 'image/jpeg')||(file.type === 'image/png');
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                this.$message.error('上传头像图片只能是 JPG/png 格式!');
                }
                if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            },
            getNameByIdFromArr(id,arr){
                for(let i in arr){
                    if(arr[i].id ==id){
                        return arr[i].name
                    }
                }
            },
        }
    }
</script>

<style scoped>
    /*头部过滤*/
    .left{
        float: left;
        padding-right:30px;
    }
    .filter-item{
        margin-bottom: 20px;
    }
    .input_edit{
        width: 200px;
        float: left;
        margin-right:10px;
    }
    .cell{
        padding: 0 5px !important;
        overflow: auto;
    }
    /*上传图片*/
    .avatar-uploader .el-upload {
        border: 1px dashed #bfcbd9;
        border-radius: 6px;
    }
    .el-upload {
        display: inline-block;
        text-align: center;
        cursor: pointer;
    }
    .avatar-uploader .el-upload--text{
        width: 140px;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 140px;
        height: 140px;
        line-height: 140px;
        text-align: center;
    }
    .avatar {
        width: 260px;
        height: 120px;
        display: block;
    }
    .el-dialog .avatar {
        width: 140px;
        height: 140px;
        display: block;
    }
    span {
        white-space:normal;
    }
    img{
        max-width: 100%;
    }
    .imgs{
        width:200px;
        height:260px;
        float: left;
    }
</style>
